<template>
  <div>
    <!--    表头搜索-->
    <div style="margin:10px 0" >
      <el-input size="mini" style="width:180px" placeholder="用户ID/账号" suffix-icon="el-icon-search" v-model="sLike.userId"></el-input>
      <el-input size="mini" style="width:180px" placeholder="用户昵称" suffix-icon="el-icon-search" v-model="sLike.userName"></el-input>
<!--      <el-date-picker-->
<!--        size="mini"-->
<!--        v-model="sLike.createTime"-->
<!--        type="date"-->
<!--        placeholder="选择日期">-->
<!--      </el-date-picker>-->
      <el-select size="mini" v-model="sLike.memberType" slot="prepend" placeholder="会员分类">
        <el-option label="超金乐享卡" value="超金乐享卡"></el-option>
        <el-option label="超金乐孕卡" value="超金乐孕卡"></el-option>
      </el-select>
      <el-select size="mini" v-model="sLike.userStatus" slot="prepend" placeholder="用户状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
      <el-button size="mini" type="primary" class="ml-5" @click="load">搜索</el-button>
      <el-button size="mini" type="waring" class="ml-5" @click="rest">重置</el-button>
    </div>

<!--    按钮-->
    <div style="margin:10px 0">
<!--      <el-button size="mini" type="primary" class="ml-5" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>-->
<!--      &lt;!&ndash;            <el-button type="danger" class="ml-5" @click="deleteBatch">批量修改<i class="el-icon-remove-outline"></i></el-button>&ndash;&gt;-->
<!--      <el-popconfirm-->
<!--        class="ml-5"-->
<!--        confirm-button-text='确定'-->
<!--        cancel-button-text='取消'-->
<!--        icon="el-icon-info"-->
<!--        icon-color="red"-->
<!--        title="确定删除吗？"-->
<!--        @confirm="deleteBatch"-->
<!--      >-->
<!--        <el-button type="danger" size="mini" class="ml-5" slot="reference">批量修改<i class="el-icon-remove-outline"></i></el-button>-->

<!--      </el-popconfirm>-->
<!--      <el-upload action="http://localhost:8081/user/import" :show-file-list="false" accept=" .xlsx, .pdf," :on-success="handleExcelImportSuccess" style="display: inline-block">-->
<!--        <el-button size="mini" type="primary" class="ml-5" @click="">导入<i class="el-icon-bottom"></i></el-button>-->
<!--      </el-upload>-->
<!--      <el-button size="mini" type="primary" class="ml-5" @click="exp">导出<i class="el-icon-top"></i></el-button>-->
    </div>

<!--    表单展示-->
    <el-table size="mini" :data="tableData" border stripe :header-cell-style="{background:'#ccc'}" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="id" v-if="false"></el-table-column>
      <el-table-column prop="serialNumber" label="序号"></el-table-column>
      <el-table-column prop="identifier" label="编号"></el-table-column>
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="userPhoto" label="用户头像">
        <template slot-scope="scope">
          <el-image style="width: 100%; height: 100px" :src="scope.row.userPhoto" :preview-src-list="[scope.row.userPhoto]" :key="scope.row.id">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="userName" label="用户名称"></el-table-column>
      <el-table-column prop="memberType" label="会员分类" width="90">
      </el-table-column>
      <el-table-column prop="userMobile" label="用户手机号"></el-table-column>
      <el-table-column prop="userLevel" label="用户等级"></el-table-column>
      <el-table-column prop="userStatus" label="用户状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if='scope.row.userStatus == "1" '>启用</el-tag>
          <el-tag type="info" v-if='scope.row.userStatus == "0" '>禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="260">
        <template slot-scope="scope">
          <el-button @click="selectById(scope.row)" type="button" size="small">查看<i class="el-icon-edit"></i></el-button>
          <el-button v-if='scope.row.userStatus == "0" ' @click="updateUserStatus(1,scope.row.id)" type="button" size="small">启用<i class="el-icon-edit"></i></el-button>
          <el-button v-if='scope.row.userStatus == "1"' @click="updateUserStatus(0,scope.row.id)" type="button" size="small">禁用<i class="el-icon-edit"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div style="padding :10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 4, 8, 10]"
        :current-page="sLike.pageNum"
        :page-size="sLike.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--          添加/修改弹窗-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 80%">
            <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看" :visible.sync="userListById">
      <el-table :data="activityById">
        <el-table-column prop="serialNumber" label="序号"></el-table-column>
        <el-table-column prop="identifier" label="编号"></el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="userPhoto" label="用户头像">
          <template slot-scope="scope">
            <el-image style="width: 100%; height: 100px" :src="scope.row.userPhoto" :preview-src-list="[scope.row.userPhoto]" :key="scope.row.id">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="userName" label="用户名称"></el-table-column>
        <el-table-column prop="memberType" label="会员分类" width="80"></el-table-column>
        <el-table-column prop="userMobile" label="用户手机号"></el-table-column>
        <el-table-column prop="userLevel" label="用户等级"></el-table-column>
        <el-table-column prop="userStatus" label="用户状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if='scope.row.userStatus == "1" '>启用</el-tag>
            <el-tag type="info" v-if='scope.row.userStatus == "2" '>禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData">
        <el-table-column prop="orderTimes" label="下单次数"></el-table-column>
        <el-table-column prop="exchangeTimes" label="兑换次数"></el-table-column>
        <el-table-column prop="totalOrderAmount" label="下单总金额"></el-table-column>
        <el-table-column prop="sharingTimes" label="分享次数"></el-table-column>
        <el-table-column prop="signInBonus" label="签到奖励金"></el-table-column>
        <el-table-column prop="integral" label="积分"></el-table-column>
        <el-table-column prop="loginTimes" label="登录次数"></el-table-column>
      </el-table>
      <el-table :data="tableData">
        <el-table-column prop="balance" label="余额"></el-table-column>
        <el-table-column prop="shoppingForRefund" label="购物返现"></el-table-column>
        <el-table-column prop="coupon" label="优惠券"></el-table-column>
        <el-table-column prop="seckillCount" label="参加秒杀的次数"></el-table-column>
        <el-table-column prop="memberCode" label="会员码"></el-table-column>
        <el-table-column prop="exchangeAmount" label="兑换金额"></el-table-column>
        <el-table-column prop="activitiesAttended" label="参加的活动"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userListById = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {userList,updateUserStatus } from "../../api/userCYb.js";

export default {
  name: "User",
  data(){
    return {
      sLike:{
        userId:'',
        userName:'',
        createTime:'',
        memberType:'',
        userStatus:'',
        status:'',

        pageNum:1,//页数
        pageSize:3,//每页条数
      },
      tableData: [],
      total:0,//分页总条
      dialogFormVisible:false,
      multipleSelection:[],
      form:{},
      roles:[],
      userListById:false,//查看弹窗
      activityById:[],//查看接收集合
    }
  },
  created() {
    this.load()
  },
  methods:{
    //查询
    load(){
      console.log(this.sLike)
      userList(this.sLike).then(res =>{

        let i=0;
        res.data.forEach(req=>{
          if (req.userMobile){
            let phone = req.userMobile.slice(0, 3) +
              "****" +
              req.userMobile.slice(-4);
            res.data[i].userMobile=phone

          }

          if (req.userName && req.userName.length == 2) {
            res.data[i].userName = req.userName.slice(0, 1) + "*";
            } else if (req.userName && req.userName.length > 2) {
              const str = "*";
              res.data[i].userName =
                req.userName.slice(0, 1) +
                str.repeat(req.userName.length - 2) +
                req.userName.slice(-1);
            }
          i++
        })

        this.tableData = res.data
        this.total = res.data.total

      })
    },
    //查看
    selectById(row){
      this.userListById=true
      this.activityById = []
      this.activityById.push(row)
      console.log(this.activityById)
    },

    //重置
    rest(){
      this.sLike = {}
    },
    updateUserStatus(status,id){
      this.sLike={
        pageSize: 3,
        pageNum: 1,
        status: status,
        id:id
      }
      updateUserStatus(this.sLike).then(res=>{
        this.$message.success("成功")
        this.load()
      })

    },
    handleEdit(row) {
      // this.form = row //会出现表格展示数据随着弹窗改变而改变
      this.form = JSON.parse(JSON.stringify(row)) //深拷贝
      // this.form = Object.assign({},row) //将row数据拷贝到空对象中
      // this.form = {...row} //将运算符后面的变量里东西每一项拆下来。
      // console.log({...row});
      this.dialogFormVisible = true
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.sLike.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.sLike.pageNum=pageNum
      this.load()
    },
    //打开弹窗
    handleAdd(){
      this.dialogFormVisible = true
      this.form = {}
    },
    //添加 or 修改
    save(){
      request.post("user",this.form).then(res=>{
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    //删除
    handleDel(id){
      request.delete("/user/"+id).then(res=>{
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    //头部选中
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection = val
    },
    //批量删除
    deleteBatch(){
      let ids = this.multipleSelection.map(v => v.id) //原数组有对象把对象数组转换成纯id数组
      request.post("/user/deleteBatch",ids).then(res=>{
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    //导出接口
    exp(){
      window.open("http://localhost:8081/user/export")
    },
    //文件导入成功
    handleExcelImportSuccess(){
      this.$message.success("文件导入成功")
      this.load()
    },
    // handleExcelImportSuccess(){},
  }
}
</script>

<style scoped>

</style>
